<template>
	<view class="participant-item">
		<view class="participant-avatar">
			<up-image
				src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=young%20man%20cyclist%20beginner%20avatar%20portrait&image_size=square"
				width="100%" height="100%" shape="circle"></up-image>
		</view>
		<view class="participant-name">张三</view>
		<Tag text="新手骑士" name="expert" />
	</view>
</template>

<script setup>
	import Tag from './Tag.vue';
</script>

<style lang="scss" scoped>
	.participant-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		background: linear-gradient(135deg, #f8fafc, #f1f5f9);
		border-radius: 16px;
		border: 1px solid rgba(226, 232, 240, .8);
		transition: all .3s ease;

		.participant-avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			margin-bottom: 12px;
			border: 3px solid white;
			box-shadow: 0 4px 12px #00000026;
		}

		.participant-name {
			font-size: 15px;
			color: #1e293b;
			margin-bottom: 8px;
			font-weight: 600;
			line-height: 1.3;
		}
	}
</style>